<!--
  功能：设备信息
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月04日 20:13:11
-->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane key="sheBeiXinXi" tab="设备信息">
      <a-row :gutter="8">
        <a-col :span="12" v-for="(item, index) in controllerData" class="y-col">
          <a-card>
            <template #title><span class="y-shebeixinxi-title">{{item?.name || '未知名称'}}</span></template>
            <a-descriptions layout="vertical" bordered size="small" :column="5">
              <template #title><span class="y-shebeixinxi-chuliqi-title">处理器</span></template>
              <a-descriptions-item label="个数">{{item?.cpu?.number || 0}}</a-descriptions-item>
              <a-descriptions-item label="核数">{{item?.cpu?.cores || 0}}</a-descriptions-item>
              <!-- <a-descriptions-item label="型号">龙芯3A3000</a-descriptions-item> -->
              <a-descriptions-item label="占用率">{{item?.cpu?.usage || 0}}</a-descriptions-item>
              <a-descriptions-item label="主频">{{item?.cpu?.mhz || 0}}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions layout="vertical" bordered size="small" class="y-shebeixinxi-neicunshiyonglv">
              <template #title><span class="y-shebeixinxi-neicunshiyonglv-title">内存使用率</span></template>
              <a-descriptions-item label="内存大小">{{item?.memory?.total || 0}}  MiB</a-descriptions-item>
              <a-descriptions-item label="空闲">{{item?.memory?.free || 0}} MiB</a-descriptions-item>
              <a-descriptions-item label="占用率">{{item?.memory?.usage || 0}} %</a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>

      </a-row>
      <a-row align="center" v-if="controllerData.length ==0 ">
        <a-empty description="暂无设备信息" />
      </a-row>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
const activeKey = ref('sheBeiXinXi')

// 控制器的数据
let controllerData = ref([])
// 获取控制器
const initController = () => {
  controllerData.value = []
  apiWs.controller().subscribe(resp => {
    if (resp && resp.length > 0) {
      for (let i = 0; i < resp.length; i++) {
        let controllerName = resp[i]
        controllerData.value[i] = {
          name: controllerName
        }
        initDeviceCpuinfo(i) // 获取cpu状态
        initDeviceMemoryinfo(i) // 获取内存状态
        // initDeviceFaninfo(i) // 获取风扇状态 todo: 注释掉 驱动暂时没有
      }
    }
  })
}

// 获取CPU状态
const initDeviceCpuinfo = index => {
  let params = {
    cid: index
  }
  apiWs.cpu(params).subscribe(resp => {
    controllerData.value[index].cpu = resp
  })
}

// 获取CPU状态
const initDeviceFaninfo = index => {
  let params = {
    cid: index
  }
  apiWs.fan(params).subscribe(resp => {
    controllerData.value[index].fan = resp
  })
}

// 获取内存状态
const initDeviceMemoryinfo = index => {
  let params = {
    cid: index
  }
  apiWs.memory(params).subscribe(resp => {
    controllerData.value[index].memory = resp
  })
}

onMounted(() => {
  initController() // 加载控制器的接口
})
</script>

<style scoped lang="scss">
.y-col {
  margin-bottom: 8px;
}

.y-shebeixinxi-title {
  color: tomato;
  font-weight: bold;
  font-size: 16px;
}
.y-shebeixinxi-chuliqi-title,
.y-shebeixinxi-neicunshiyonglv-title {
  font-size: 14px;
  font-weight: bold;
}
.y-shebeixinxi-neicunshiyonglv {
  margin-top: 4px;
}

::v-deep.ant-descriptions .ant-descriptions-header {
  margin: 0px 0px 10px 0px;
}
::v-deep.ant-descriptions.ant-descriptions-bordered .ant-descriptions-item-label {
  background: #dfeffc url('../../assets/images/menu-btn-bg.png') 50% 50% repeat-x;
  font-weight: bold;
  color: #2e6e9e;
  margin-bottom: 2px;
}
</style>